<template>
    <el-breadcrumb class="vea-breadcrumb">
        <el-breadcrumb-item :to="{name:'home'}">首页</el-breadcrumb-item>
        <el-breadcrumb-item>网站设置</el-breadcrumb-item>
    </el-breadcrumb>
    <ul class="vea-website-details">
        <li class="vea-website-details-list">
            <div class="vea-website-details-label">
                网站名称
            </div>
            <div class="vea-website-details-value">
                {{ websiteConfig.name }}
            </div>
        </li>
        <li class="vea-website-details-list">
            <div class="vea-website-details-label">
                版权信息
            </div>
            <div class="vea-website-details-value">
                &copy; {{ websiteConfig.copyright }} {{ websiteConfig.start_time }}-{{ new Date().getFullYear() }}
                <el-link type="primary" link underline href="https://beian.miit.gov.cn/#/Integrated/recordQuery"
                         target="_blank">
                    {{ websiteConfig.filings }}
                </el-link>
                <el-link type="primary" link underline :href="`https://${websiteConfig.index}`" target="_blank">
                    {{ websiteConfig.index }}
                </el-link>
                All Rights Reserved.
            </div>
        </li>
        <li class="vea-website-details-list">
            <div class="vea-website-details-label">
                关键词
            </div>
            <div class="vea-website-details-value">
                <el-tag v-for="(keys,inx) in websiteConfig.key" :key="inx">
                    {{ keys }}
                </el-tag>
            </div>
        </li>
        <li class="vea-website-details-list">
            <div class="vea-website-details-label">
                简介
            </div>
            <div class="vea-website-details-value">
                {{ websiteConfig.jingle }}
            </div>
        </li>
        <li class="vea-website-details-list">
            <div class="vea-website-details-label">
                状态
            </div>
            <div class="vea-website-details-value">
                <el-switch :active-value="1" :inactive-value="2" v-model="websiteConfig.status" disabled/>
            </div>
        </li>
    </ul>
</template>

<script setup>
import {websiteConfig} from "@/utils/website.json"
</script>

<style lang="less" scoped>
.vea-website-details {
  .vea-website-details-list {
    display: flex;
    font-size: 14px;
    line-height: 1.75;
    align-items: center;

    .vea-website-details-label {
      width: 120px;
    }

    .vea-website-details-value {
      .el-link, .el-tag {
        margin-right: 10px;
      }

    }
  }
}
</style>